<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-23 11:41:29
 * @LastEditTime: 2024-05-05 14:06:44
 * @FilePath: \env-manager-pc\src\views\update\file\index.vue
-->
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import edit from './edit.vue'
import type { UpdateFileForm } from './page'
import { usePage } from '@/utils/commonHook'
import updateApi from '@/api/modules/update'
import { ModelType } from '@/types/common'
import type { doLoading } from '@/types/page'

const editRef = ref()

const tableRef = ref()
const searchData = reactive({
  name: '',
  ver: '',
})
const { page, pageNumChange, pageSizeChange } = usePage(getTableData)

function search() {
  page.PageNum = 1
  getTableData()
}
const tableData = ref<any[]>([])
const loading = ref(false)

async function getTableData() {
  loading.value = true
  const res = await updateApi.GetUpgradeFiles({
    ...searchData,
    pageSize: page.PageSize,
    pageNum: page.PageNum,
  })
  loading.value = false
  const { Objs, RecordsetCount } = res
  tableData.value = Objs || []
  page.RecordsetCount = RecordsetCount
}

getTableData()

async function submitEdit(formData: UpdateFileForm, doLoading: doLoading) {
  try {
    doLoading(true)
    const isCreate = !formData.GUID
    isCreate
      ? await updateApi.AddUpgradeFile({
        upgradeFile: formData,
      })
      : await updateApi.UpdateUpgradeFile({
        fileGUID: formData.GUID,
        upgradeFile: formData,
      })
    getTableData()
    editRef.value.close()
    ElMessage.success({
      message: isCreate ? '新增成功' : '编辑成功',
      type: 'success',
    })
  }
  catch (e) {
    doLoading(false)
  }
}

async function toDel(row: UpdateFileForm) {
  await ElMessageBox.confirm(`确定删除方案 ${row.Name} 吗？`, '提示', {
    type: 'warning',
  })
  await updateApi.DeleteUpgradeFile({ fileGUID: row.GUID })
  ElMessage.success({
    message: '删除成功',
    type: 'success',
  })
  getTableData()
}

function toCreate() {
  editRef.value.open({
    type: ModelType.add,
  })
}

function toEdit(row: any) {
  editRef.value.open({
    type: ModelType.edit,
    data: row,
  })
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <ElForm label-width="100">
          <ElRow>
            <ElCol :span="6">
              <ElFormItem label="升级方案">
                <ElInput v-model="searchData.name" clearable placeholder="请输入" />
              </ElFormItem>
            </ElCol>
            <ElCol :span="6">
              <ElFormItem label="版本号">
                <ElInput v-model="searchData.ver" clearable placeholder="请输入" />
              </ElFormItem>
            </ElCol>
            <!-- <ElCol :span="6">
              <ElFormItem label="升级方式">
                <ElSelect class="w-full">
                  <ElOption label="企业1" value="1" />
                  <ElOption label="企业2" value="2" />
                </ElSelect>
              </ElFormItem>
            </ElCol> -->
            <ElCol :span="6" :push="6" class="flex flex-justify-end">
              <ElButton type="primary" @click="search">
                查询
              </ElButton>
              <ElButton type="success" @click="toCreate">
                新增
              </ElButton>
            </ElCol>
          </ElRow>
        </ElForm>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          ref="tableRef"
          height="100%" auto-resize
          border
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn title="序号" type="seq" width="80" />
          <VxeColumn field="Name" title="升级方案" min-width="100" />
          <VxeColumn field="UpgradeMode" title="升级方式" min-width="220">
            <template #default="{ row }">
              {{ row.UpgradeMode === 0 ? 'FTP' : 'HTTP' }}
            </template>
          </VxeColumn>
          <VxeColumn field="Path" title="升级文件URL" min-width="220" />
          <VxeColumn field="Ver" title="版本号" min-width="160" show-overflow />
          <VxeColumn field="StateRemark" title="版本说明" min-width="100" />
          <VxeColumn field="UpLastEndTime" title="操作" width="130">
            <template #default="{ row }">
              <el-button link type="primary" @click="toEdit(row)">
                修改
              </el-button>
              <el-button link type="danger" @click="toDel(row)">
                删除
              </el-button>
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
    <edit ref="editRef" @submit="submitEdit" />
  </div>
</template>
